<template>
  <ul :class="{show:show_more,hide:!show_more}">
    <li><label>{{ title }}：</label></li>
    <li><span><i :class="{'orange-radius-bg': active_index ===''}" @click="switchTab('','')">不限</i></span></li>
    <li>
      <span 
        v-for="(item,index) in items"
        @click="switchTab(item[unique_field]||item.id,index)"
        :key="item[unique_field]">
        <i :class="{'orange-radius-bg':active_index === index}">{{ item[name] }}</i>
      </span>
    </li>
    <li class="orange-color" @click="showMore" v-if="can_unfold">
      {{ show_more?'收起':(items.length>0?'展开':'')}}
    </li>
  </ul>
</template>
<script>
  export default{
    props:{
      title:{
        type:String
      },
      items:{
        type: Array,
        // required: true,
      },
      unique_field:{
        type:String,
      },
      name:{
        type:String,
      },
      changeTab:{
        type: Function,
        default:()=>{},
      },
      can_unfold:{
        type:Boolean,
        default:false,
      },
    },
    data(){
      return {
        show_more:false,
        active_index: "",
      }
    },
    methods: {
      showMore(){
        this.show_more = !this.show_more;
      },
      switchTab(unique_field_value,index){
        this.changeTab(this.unique_field,unique_field_value,index);
        this.active_index = index;
      }
    }
  }
</script>
<style lang="less" scoped>
  ul{
    overflow: hidden;
    li{
      margin-top: 10px;
      float: left;
      &:first-child{
        width: 100px;
        text-align: right;
        margin-right: 20px;
      }
      &:nth-child(3){
        width: 680px;
      }
      &:nth-child(4){
        float: right;
        cursor: pointer;
      }
      span{
        cursor: pointer;
        display: inline-block;
        min-width: 60px;
        margin-right: 10px;
        line-height: 20px;
        margin-bottom: 20px;
      }
    }
  }
  .show{
    max-height: 200px;
    transition: all 0.5s;
  }
  .hide{
    max-height: 40px;
    transition: all 0.5s;
  }
</style>

